<template>
	<div class="com-container" @dblclick="revertMap">
		<div class="com-chart" ref='map_ref'></div>
	</div>
</template>

<script>
	import axios from 'axios'
	import { getProvinceMapInfo } from '@/utils/map_utils'
	export default {
		data() {
			return {
				//实例对象
				chartInstance:null,
				//服务器数据
				resData: null,
        mapData: {} // 所获取的省份的地图矢量数据
			}
		},
		computed:{
			theme(){
				 return this.$store.state.theme;
			}
		},
		watch:{
			theme(){
				//销毁当前图表
				this.chartInstance.dispose();
				//重新以最新主题初始化图表
				this.initChart();
				//完成适配
				this.screenAdapter();
				//更新图表展示
				this.updataChart();			
			}
		},
		created(){
			//组件创建完成后进行回调函数的注册
			this.$socket.registerCallBack('mapData',this.getData)		
		},		
		mounted() {
			this.initChart();
			//this.getData();
			this.$socket.send({
				action: 'getData',
				socketType: 'mapData',
				chartName: 'map',
				value: ''
			})
			this.screenAdapter();
			window.addEventListener("resize", this.screenAdapter);
		},
		destroyed() {
			window.removeEventListener("resize", this.screenAdapter);
			this.$socket.unRegisterCallBack('mapData');
		},
		methods: {			
			//初始化echart实例对象
			initChart() {
				this.chartInstance = this.$echarts.init(this.$refs.map_ref,this.$store.state.theme);
				//http://localhost:8999/#/mapPage
        axios.get('http://localhost:8999/static/map/china.json').then(res=>{
					 const chinaData = res.data;
					 // console.log(res)
					 this.$echarts.registerMap('china',chinaData);
					 const initOption = {
						title: {
							text: '▎ 商家分布',
							left: 20,
							top: 20,							
						},
						geo:{
					 		type: 'map',
					 		map:'china',
						  top: '5%',
						  bottom: '5%',
						  itemStyle: {
						    areaColor: '#6987bf',
						    borderColor: '#333'
						  }							
					 	},
						legend: {
							left: '5%',
							bottom: '5%',
							orient: 'vertical'
						}
					 }
				this.chartInstance.setOption(initOption);
				})					
				this.chartInstance.on('click',async arg => {
					// arg.name 得到所点击的省份, 这个省份他是中文.利用getprovinceMapInfo转为拼音和路径
					const provinceInfo = getProvinceMapInfo(arg.name);
					console.log(provinceInfo);
        // 判断当前所点击的这个省份的地图矢量数据在mapData中是否存在
					if (!this.mapData[provinceInfo.key]) {
						// console.log("444");
						
					//获取省份矢量数据  const path = `/static/map/province/${name2pinyin[arg]}.json`
					  const res = await  axios.get('http://localhost:8999' + provinceInfo.path);
						// console.log(res);
						// console.log("333");		
							this.mapData[provinceInfo.key] = res.data;		
							this.$echarts.registerMap(provinceInfo.key,res.data);
							// console.log("111");	
					}	
							const changeOption = {
								geo: {
									map: provinceInfo.key,
									type: 'map',
								}
							};
							this.chartInstance.setOption(changeOption);												
				})		
			},
			//获取服务器数据
			getData(ret) {
				// this.$axios.get('map').then(res=>{
				// 	// this.resData = res.data;
				// 	// console.log(res);
				// 	this.resData = res.data;
				// 	this.updataChart();
				// })
					this.resData = ret;
					this.updataChart();
			},
			//处理所需数据
			updataChart() {		
					const legendArr = this.resData.map(item => {
						return item.name
					});
					const seriesArr = this.resData.map((item)=>{
						return {
          type: 'effectScatter',
          rippleEffect: {
            scale: 5,
            brushType: 'stroke'
          },
          name: item.name,
          data: item.children,
          coordinateSystem: 'geo',				
						}
					});
				const dataOption = {
        legend: {
          data: legendArr
        },
				series: seriesArr
				};
				this.chartInstance.setOption(dataOption);
			},
			//echarts实例屏幕的适配
			screenAdapter(){
        const oneWeight = this.$refs.map_ref.offsetWidth / 100 ;
			  const adapterOption = {
        title: {
          textStyle: {
            fontSize: oneWeight * 3
          }
        },
        legend: {
          itemWidth: oneWeight * 2,
          itemHeight: oneWeight * 2,
          itemGap: oneWeight * 2,
          textStyle: {
            fontSize: oneWeight * 2
          }
        }
				};
				this.chartInstance.setOption(adapterOption);
			  this.chartInstance.resize();
			},
			// 回到中国地图
			  revertMap () {
			    const revertOption = {
			      geo: {
			        map: 'china',
							type:'map'
			      }
			    }
			    this.chartInstance.setOption(revertOption);
			  }
			
		
		}
	}
</script>


<style  lang ='less' scoped>

</style>
